<script lang="ts" setup>
import type { ListAndQuestionCategoryVO } from '../data'
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const { items } = defineProps<{
  items: ListAndQuestionCategoryVO[]
  shownCategoryId?: string
}>()

const router = useRouter()

const path = computed(() => router.getRoutes().find((route) => route.name === 'home')?.path)

const generatePath = (id: string) => `${path.value}?category=${id}`
</script>

<template>
  <div
    class="px-6! py-4.5! flex items-center rounded-xl select-none gap-4.5 from-[#fceabb] to-[#f8b500] bg-gradient-to-br"
  >
    <div class="items-end-safe inline-flex gap-4.5">
      <RouterLink draggable="false" to="/" class="flex items-center flex-col gap-2">
        <img draggable="false" src="../../../assets/chong.png" alt="go" class="w-11 -mr-2!" />
        <span class="text-sm/normal text-orange-950">开刷</span>
      </RouterLink>
      <RouterLink draggable="false" to="/" class="flex items-center flex-col gap-2">
        <img draggable="false" src="../../../assets/hot.svg" alt="hot" class="w-8" />
        <span class="text-sm/normal text-orange-950">热门</span>
      </RouterLink>
      <span class="h-6 inline-block w-px bg-[#feb47b] self-center"></span>
    </div>
    <div class="inline-grid flex-1 grid-cols-[repeat(auto-fit,_6.5rem)] gap-2">
      <RouterLink
        v-for="{ id, name } of items"
        :key="id"
        draggable="false"
        :to="generatePath(id)"
        replace
        class="rounded-full h-8 text-center text-sm/8 transition-colors duration-300"
        :class="
          shownCategoryId === id
            ? 'bg-gradient-to-r from-[#ff7e5f] via-[#feb47b] to-[#ff7e5f] bg-size-[200%_100%]  text-white! animate-shimmer'
            : 'bg-white text-zinc-800!'
        "
      >
        {{ name }}
      </RouterLink>
    </div>
  </div>
</template>
